﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <title>文件上传</title>
    
    <link rel="shortcut icon" href="favicon.ico"> 
	<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="js/plugins/layui/css/layui.css" rel="stylesheet">
	<link href="css/style.min.css?v=4.0.0" rel="stylesheet" />
	<link href="css/custom/uploadImg.css" rel="stylesheet">
	<style>

	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                    <div class="ibox-title">

                        <div class="ibox-tools">
							<a class="collapse-link" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
								<i class="fa fa-warning"></i>
							</a>
                            <a class="collapse-link" href="javascript:location.href=location.href;">
                                <i class="fa fa-refresh"></i>
                            </a>
                        </div>
                        <h5>基本 <small>分类/查找</small></h5>
						<div class="col-sm-12">
							<div class="col-sm-10" >
								
							</div>
							<div class="col-sm-2 text-right">
							</div>
						</div>
                    </div>
                    <div class="ibox-content">
						<div class="row">
							<div class="col-sm-6">
								<div id="uploader">
									<div class="queueList">
										<div id="dndArea" class="placeholder">
												<i class="fa fa-cloud-upload"></i>
												<input type="file" name="file" accept="image/*" id="upload" multiple>
											<p>点击上传或将图片拖拽到这里即可</p>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-6" id="preview">
								<ul class="content-img-list" id="content-img-list"></ul>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-2 col-sm-offset-10">
								<button id="btn-submit-upload" class="btn btn-w-m btn-success"><i class="fa fa-cloud-upload"></i>&nbsp;一键上传</button>
							</div>
						</div>

                </div>
            </div>
        </div>
        
    </div>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
	<script src="js/plugins/layui/layui.js"></script>
	<script src="js/plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script src="js/custom/uploadImg.js"></script>
	<script> 
		$(".ibox-content").on("click","#btn-submit-upload",function() {
			var url = 'fileRun/uploadCommonFile';
			
			if(imgFile.length == 0){
				top.toastr.warning("暂无图片");
				return;
			}
			var count = 0;
			var len = imgFile.length;
			var _this = this;
			var loop = function(){
				if(count>len){
					top.toastr.success("成功上传个文件" );
					return;
				}
				var formFile = new FormData();
				formFile.set('file', imgFile[0]);
				$.ajax({
					url: domain + url,
					type: 'POST',
					data: formFile,
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					// traditional:true,
					dataType:'json',
					crossDomain:true,
					xhrFields:{
						withCredentials:true
					},
					success: function(data) {
						console.log(formFile.get('file'));
						if(data.status = 200){	
							$(_this).parent().parent().prev().children("#preview").children().find("li").eq(0).remove();
							count++;		
						}else{
							top.toastr.warning("上传失败，请检查");
						}
					},
					error:function(data) {
						top.toastr.error("操作失败，请检查网络");
					}
				});
				removeImg(0);
				_this.loopId = window.setTimeout(loop,200);
			}
			_this.loopId = window.setTimeout(loop,0);
		    })
	</script>
	
	<script>	//=======   页面权限显示   ======//
	//当前菜单代码 (每个页面不一样，需要配置)
		var s_menuCode = "upload_file";
	//所有可用权限
		var roleAuth = app.permission(s_menuCode);
	//当前菜单所有可用权限（排除被禁用的按钮）
		var menuAuth = app.menuButtonByOn(s_menuCode);
		
		drawBtn(roleAuth,menuAuth);
	</script>
</body>

</html>
